<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<title></title>
</head>

<body>
	<h1 style="text-align: center;">用户查找</h1>
	<table id='userTable'>
		<thead>
			<tr>
				<th>选择</th>
				<th>用户id</th>
				<th>用户</th>
				<th>密码</th>
				<th>性别</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>张三</td>
				<td>123</td>
				<td>男</td>
			</tr>
		</tbody>
	</table>
	<button id="ops">微操大师</button>
	
	
	<script>
		// function del(index){
		// 	console.log(index);
		// }
		// function edit(index){
		// 	console.log(index);
		// }
	
		// $('#userTable').dataTable({
		var dt=$('#userTable').DataTable({
			ajax:{
				// type:'post',传递数据的方式
				// data:''，传递地址的数据
				url:'user.json',
				dataSrc:function(data){
					//编辑 删除
				data.students.forEach((o,i)=>{
					o.choose=`<input type="checkbox" value=${i}>`;
					o.option=`<a href='#' onclick='edit(this)'>编辑</a>&nbsp;&nbsp;<a href='#' 
					onclick='del(this)'>删除</a>`
					
				});
				
				return data.students;	
				
				
				// //选择
				// // data.students.forEach(o=>o.choose='111');
				// data.students.forEach((o,i)=>o.choose=`<input type="checkbox" value=${i}>`);
				// console.log(data.students);
				// return data.students;
			
					
				}//服务端返回的数据 必须
			},
			
			columns:[
				{data:'choose'},
				{data:'id'},
				{data:'name'},
				{data:'password'},
				{data:'sex'},
				{data:'option'}
			],//单信息来源
			
			searching:false,//消除搜索栏
			info:true,//信息栏
			paging:true,//翻页按钮
			lengthMenu:[2,20,30,40],//单页显示数量菜单
			pageLength:5,//单页显示数量
			autowidth:true,//自动列宽
			//语言：
			language:{
				lengthMenu:'每页显示_MENU_条记录',
				info:'显示第_START_至_END_条记录，共_TOTAL_条记录',
				paginate:{
					
					first:'首页',previous:'上一页',next:'下一页',last:'末页'
				
				}
			}
		})
		
	
		$('#ops').click(function(){
			var dt=$('#userTable').dataTable();
			dt.fnDeleteRow(1)
			console.log(dt.fnGetData());
			
		})
		
		function del(a){
			let i=$(a).parent().parent().index();
			dt.row(i).remove().draw();
			
			// console.log(index);
		}
		function edit(a){
			let i=$(a).parent().parent().index();
			
			// console.log(index);
		}
		
		
	</script>
</body>
</html>
